---
title: Цветовая Схема
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Карточка цветовой схемы

Представляет различные цветовые схемы и специально подходит для светлых и темных тем.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Свойства                | Тип                                     | Описание                                                                                     | По умолчанию |
| ----------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------- | ------------ |
| вариант                 | строка                                  | Вариант цветовой схемы. Варианты включают `Тёмный`, `Светлый`, и `Системный` | светлый      |
| выбран                  | boolean                                 | Если `true`, отображает галочку, чтобы указать выбранную цветовую схему                      |              |
| дополнительные свойства | `React.ComponentPropsWithoutRef<'div'>` | Стандартные свойства HTML-элемента `div`                                                     |              |

</Tab>

</Tabs>

## Выбор цветовой схемы

Позволяет пользователям выбирать между различными цветовыми схемами.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Свойства | Тип              | Описание                                                                                        |
| -------- | ---------------- | ----------------------------------------------------------------------------------------------- |
| значение | `Цветовая Схема` | Текущая выбранная цветовая схема                                                                |
| onChange | функция          | Функция обратного вызова, которую вы хотите вызвать, когда пользователь выбирает цветовую схему |

</Tab>

</Tabs>
